<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Vue-测量</title>
        <!--引入第三方的jquery脚本库-->
        <script include="vue" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script>
        <style type="text/css">
            #main {
                margin: 0 0;
                width: 100%;
                height: 100vh;
            }
            #toolbar-wrapper {
                position: absolute;
                z-index: 9999;
                display: inline-flex;
                overflow-x: hidden;
                overflow-y: visible;
                top: 20px;
                left: 20px;
            }
            .toolbar-item {
                background: #ffffff;
                border: 1px dashed #666666;
                text-align: center;
                font-size: 20px;
                line-height: 20px;
                height: fit-content;
                padding: 6px 16px;
                cursor: pointer;
            }
            #map {
                height: 100vh;
                width: 100%;
            }
            .label {
                color: #3bb2d0;
                font-size: 16px;
                font-weight: bold;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <mapgis-web-map
                id="map"
                v-bind:map-style="mapStyle"
                v-bind:zoom="mapZoom"
                v-bind:center="outerCenter"
                v-bind:crs="mapCrs"
                v-on:load="handleMapLoad"
            >
                <mapgis-ogc-wmts-layer 
                    v-bind:layer-id="layerWmtsId"
                    v-bind:source-id="sourceWmtsId" 
                    v-bind:base-url="wmtsurl"
                    v-bind:tile-matrix-set="tileMatrixSet"
                    v-bind:wmts-layer="layer"
                    v-bind:format="format"
                    v-bind:token="token"
                >
                </mapgis-ogc-wmts-layer>
                <mapgis-igs-doc-layer
                    v-bind:layer-id="layerRasterId"
                    v-bind:source-id="sourceRasterId"
                    v-bind:base-url="baseUrl"
                    v-bind:layers="layers"
                >
                </mapgis-igs-doc-layer>
            </mapgis-web-map>
        </div>
        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        mapStyle: {
                            //设置版本号，一定要设置
                            version: 8,
                            //添加来源
                            sources: {},
                            //设置加载并显示来源的图层信息
                            layers: [],
                        }, // 地图样式
                        mapZoom: 8, // 地图初始化级数
                        outerCenter: [116.39, 40.20], // 地图显示中心
                        mapCrs: 'EPSG:4326',

                        layerWmtsId: 'ogcwmts_layerId',
                        sourceWmtsId: 'ogcwmts_sourceId',
                        wmtsurl: 'http://t0.tianditu.gov.cn/img_c/wmts',
                        layer:"img",
                        tileMatrixSet:"c",
                        format:"tiles",
                        token: {
                            key: 'tk',
                            value: 'f5347cab4b28410a6e8ba5143e3d5a35'
                        },

                        layerRasterId: 'raster_layerId',
                        sourceRasterId: 'raster_sourceId',
                        baseUrl:'http://develop.smaryun.com:6163/igs/rest/mrms/docs/北京市',
	                    layers:'show:0,1,2,3,4,5,6,7'
                    };
                },
                methods: {
                    enableMeasure() {
                        const component = this.$refs.measureref;
                        if (component) {
                            component.enableMeasure();
                        }
                    },
                    handleMapLoad(payload) {
                        this.map = payload.map;
                    }
                }
            });
        </script>
    </body>
</html>
